<link rel="stylesheet" href="./static/css/classify.css">
<div data-ng-controller='classify'>
		<header class="header">
			<button>back</button>
			<p class="text">分类</p>
			<div class="header_select">
				<p>广州市
					<a href="#" class="target">
						<img src="./static/images/arrows_bottom.png" alt="">
					</a>
				</p>
				<div id="area" style="display:none;">
					<ul>
						<li>惠州市</li>
						<li>深圳市</li>
						<li>东莞市</li>
						<li>梅州市</li>
					</ul>
				</div>
			</div>
			<div class="clear"></div>
		</header>
		<div class="classify" style="overflow:hidden">
			<div class='swipe'>
			  <ul id='slider4'>
			    <li style='display:block'>
			    	<ul class="list">
						<li><a href=""><img src="./static/images/classify_cate.png" alt="">美食</a></li>
						<li><a href="movies.html"><img src="./static/images/classify_exercise.png" alt="">电影</a></li>
						<li><a href=""><img src="./static/images/classify_movie.png" alt="">运动</a></li>
						<li><a href=""><img src="./static/images/classify_sing.png" alt="">唱歌</a></li>
					</ul>
			    </li>
			    <li style='display:none;'>
			    	<ul class="list">
						<li><a href=""><img src="./static/images/classify_cate.png" alt="">美食</a></li>
						<li><a href="movies.html"><img src="./static/images/classify_exercise.png" alt="">电影</a></li>
						<li><a href=""><img src="./static/images/classify_movie.png" alt="">运动</a></li>
						<li><a href=""><img src="./static/images/classify_sing.png" alt="">唱歌</a></li>
					</ul>
			    </li>
			    <li style='display:none;'>
			    	<ul class="list">
						<li><a href=""><img src="./static/images/classify_cate.png" alt="">美食</a></li>
						<li><a href="movies.html"><img src="./static/images/classify_exercise.png" alt="">电影</a></li>
						<li><a href=""><img src="./static/images/classify_movie.png" alt="">运动</a></li>
						<li><a href=""><img src="./static/images/classify_sing.png" alt="">唱歌</a></li>
					</ul>
			    </li>
			    <li style='display:none;'>
			    	<ul class="list">
						<li><a href=""><img src="./static/images/classify_cate.png" alt="">美食</a></li>
						<li><a href="movies.html"><img src="./static/images/classify_exercise.png" alt="">电影</a></li>
						<li><a href=""><img src="./static/images/classify_movie.png" alt="">运动</a></li>
						<li><a href=""><img src="./static/images/classify_sing.png" alt="">唱歌</a></li>
					</ul>
			    </li>
			  </ul>
			</div>
			<div class="clear"></div>
			<div id="pagenavi">
				<a href="" class="active"></a>
				<a href=""></a>
				<a href=""></a>
				<a href=""></a>
			</div>
		</div>
		<article class="coupon">
			<div class="delicious">
				<h1>
					<img src="./static/images/cate.png" alt="" class="star">
					<span>美食类 </span>
						<p class="more" style="float: right;">
							<a href="./case.html">
								更多
						<img src="./static/images/index_icon_1.png" alt="" class="icon_1">
							</a>
						</p>
				</h1>
			</div>
			<ul class="cate">
				<li><a href="./case.html"><img src="./static/images/cate_1.png" alt=""></a></li>
				<li><a href="./case.html"><img src="./static/images/cate_2.png" alt=""></a></li>
				<li><a href="./case.html"><img src="./static/images/cate_3.png" alt=""></a></li>
				<li><a href="./case.html"><img src="./static/images/cate_4.png" alt=""></a></li>
			</ul>
		</article>
		<article class="coupon">
			<div class="delicious">
				<h1>
				<img src="./static/images/exercise.png" alt="" class="star">
					<span>运动类 </span>
						<p class="more" style="float: right;">
							<a href="">
					更多
					<img src="./static/images/index_icon_1.png" alt="" class="icon_1">
					</a>
						</p>
				</h1>
			</div>
			<ul class="cate">
				<li><a href=""><img src="./static/images/exercise_1.png" alt=""></a></li>
				<li><a href=""><img src="./static/images/exercise_2.png" alt=""></a></li>
				<li><a href=""><img src="./static/images/exercise_3.png" alt=""></a></li>
				<li><a href=""><img src="./static/images/exercise_4.png" alt=""></a></li>
			</ul>
		</article>
		<article class="coupon">
				<div class="delicious">
				<h1>
				<img src="./static/images/movie.png" alt="" class="star">
					<span>电影类 </span>
						<p class="more" style="float: right;">
				<a href="">
						更多
						<img src="./static/images/index_icon_1.png" alt="" class="icon_1">
					</a>
						</p>
				</h1>
			</div>
			<ul class="cate">
				<li><a href=""><img src="./static/images/movie_1.png" alt=""></a></li>
				<li><a href=""><img src="./static/images/movie_2.png" alt=""></a></li>
				<li><a href=""><img src="./static/images/movie_3.png" alt=""></a></li>
				<li><a href=""><img src="./static/images/movie_3.png" alt=""></a></li>
			</ul>
		</article>
</div>
<script type="text/javascript">
console=window.console || {dir:new Function(),log:new Function()};
var active=0,
	as=document.getElementById('pagenavi').getElementsByTagName('a');
for(var i=0;i<as.length;i++){
	(function(){
		var j=i;
		as[i].onclick=function(){
			t4.slide(j);
			return false;
		}
	})();
}
var t4=new TouchSlider('slider4',{speed:1000, direction:0, interval:6000, fullsize:true});
t4.on('before',function(m,n){
    as[m].className='';
	as[n].className='active';
})
</script>
<script>
	window.onload=function(){
	var area=document.getElementById("area");
	touch.on('.target', 'touchstart', function(ev){
			if(area.style.display=="block"){
				area.style.display="none";
			}else{
				area.style.display="block";
			} 
		});
}
</script>